<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            text-align: center;
        }

        canvas {
            border: 1px solid #000;

        }
    </style>
</head>
<body>
<div id="color">
    <input type="color" class="c1" value="#00ff00" >
    <input type="color" class="c2" value="#0094ff">
</div>

<canvas width="600" height="600"></canvas>

<script>
    var cas = document.querySelector("canvas");
    var ctx = cas.getContext("2d");
    var c1 = document.querySelector(".c1");
    var c2 = document.querySelector(".c2");

    //思路：记录鼠标按下的坐标和结束的坐标设置给渐变对象的开始坐标和结束坐标， 颜色根据color按钮决定
    var startx,starty;
    document.body.onmousedown=function(e){
        //需要的是相对于画布的坐标
        //因为点击在画布外面的时候也是有渐变颜色产生的
        //所以用鼠标相对于body的位置减去画布相对于body的位置
        //鼠标相对body的位置
        var mx= e.clientX;
        var my= e.clientY;

         startx=mx-cas.offsetLeft;
         starty=my-cas.offsetTop;

    }
    document.body.onmouseup=function(e){
        var ux= e.clientX;
        var uy= e.clientY;

        var endx=ux-cas.offsetLeft;
        var endy=uy-cas.offsetTop;
//      创建渐变对象
        var g=ctx.createLinearGradient(startx,starty,endx,endy);
//       添加颜色
        g.addColorStop(0,c1.value);
        g.addColorStop(1,c2.value);

        //使用渐变
        ctx.fillStyle=g;
//      创建图形
        ctx.fillRect(0,0,600,600)

    }










</script>
</body>
</html>